<div ng-controller="discover" class="app-container">
  <kbn-top-nav name="discover" config="topNavMenu">
    <div class="kibana-nav-info">
      <span ng-show="opts.savedSearch.id" class="kibana-nav-info-title">
        <span ng-bind="::opts.savedSearch.title"></span>
        <i aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>
      </span>

      <strong class="discover-info-hits">{{(hits || 0) | number:0}}</strong>
      <ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
    </div>
  </kbn-top-nav>
  <navbar name="discover-search">
    <form role="form" class="fill inline-form" ng-submit="fetch()" name="discoverSearch">
      <div class="typeahead" kbn-typeahead="discover">
        <div class="input-group"
          ng-class="discoverSearch.$invalid ? 'has-error' : ''">
          <input
            parse-query
            input-focus
            kbn-typeahead-input
            ng-model="state.query"
            placeholder="Search..."
            aria-label="Search input"
            type="text"
            class="form-control">
          <button type="submit"
            ng-disabled="discoverSearch.$invalid"
            aria-label="Search">
            <span aria-hidden="true" class="fa fa-search"></span></button>
        </div>
        <kbn-typeahead-items></kbn-typeahead-items>
      </div>
    </form>
    <div class="button-group" role="toolbar"></div>
  </navbar>


  <div class="container-fluid" role="main">
    <div class="row">
      <filter-bar state="state"></filter-bar>
    </div>
    <div class="row">
      <div class="col-md-2 sidebar-container collapsible-sidebar">
        <disc-field-chooser
          columns="state.columns"
          refresh="refreshFieldList"
          hits="rows"
          field-counts="fieldCounts"
          filter="filterQuery"
          index-pattern="searchSource.get('index')"
          index-pattern-list="opts.indexPatternList"
          state="state">
        </disc-field-chooser>
      </div>

      <div class="discover-wrapper col-md-10">
        <div class="discover-content">
          <discover-no-results ng-show="resultState === 'none'"></discover-no-results>

          <!-- loading -->
          <div ng-show="resultState === 'loading'">
            <div class="discover-overlay">
              <h2>Searching</h2>
              <div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
            </div>
          </div>

          <!-- result -->
          <div class="results" ng-show="resultState === 'ready'">
            <div class="discover-timechart" ng-if="opts.timefield">
              <header>
                <center class="small">
                  <span tooltip="To change the time, click the clock icon in the navigation bar">{{timeRange.from | moment}} - {{timeRange.to | moment}}</span>

                  &mdash;

                  <span class="results-interval" ng-hide="showInterval">
                    <a
                      ng-click="toggleInterval()">
                      {{ intervalName }}
                    </a>
                  </span>

                  <span ng-show="showInterval" class="results-interval form-inline">
                    <select
                      class="form-control"
                      ng-model="state.interval"
                      ng-options="interval.val as interval.display for interval in intervalOptions | filter: intervalEnabled"
                      >
                    </select>
                  </span>
                </center>

              </header>

              <visualize
                 ng-if="vis && rows.length != 0"
                 vis="vis"
                 ui-state="uiState"
                 es-resp="mergedEsResp"
                 search-source="searchSource">
               </visualize>
            </div>

            <div class="discover-table" fixed-scroll>
              <doc-table
                hits="rows"
                index-pattern="indexPattern"
                sorting="state.sort"
                columns="state.columns"
                infinite-scroll="true"
                filter="filterQuery">
              </doc-table>

              <div ng-if="rows.length == opts.sampleSize" class="discover-table-footer">
                <center>
                  These are the first {{opts.sampleSize}} documents matching
                  your search, refine your search to see others.
                  <a ng-click="toTop()" title="Back to top">Back to top.</a>
                </center>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
